<template>
  <div>
    <!-- 父亲给我传递过来的值，存在才显示 -->
    <label v-if="label">{{label}}</label>
    <div>
      <slot></slot>
      <!-- 校验错误信息 -->
      <p v-if="validateStatus == 'error'" class="error">{{errorMessage}}</p>
    </div>
  </div>
</template>

<script>
import schema from "async-validator";

export default {
  inject: ["form"], // 注入form，获取model和rules
  props: ["label", "prop"],
  data() {
    return {
      validateStatus: "", //当前状态
      errorMessage: "" //错误信息
    };
  },
  created() {
    this.$on("validate", this.validate);
  },
  mounted() {
    // 挂载到form上时，派发一个添加事件
    // 有些 选项不需要挂载，只有挂载到父级缓存里的项，将来才去校验
    // 这个项如果有prop才去校验
    if (this.prop) {
      //派发一个事件，告诉老爹，挂在完毕
      // formItemAdd表单项添加事件，this指向自己
      this.$parent.$emit("formItemAdd", this);
    }
  },
  methods: {
    //同时有很多异步校验要去处理，谁先谁过后就有问题
    //要求所有都完成后，一起处理。用Promise
    validate() {
      return new Promise(resolve => {
        // 校验当前项：依赖async-validate这个库，装了element是直接有这个库的
        const descriptor = {
          //描述符，校验规则
          //父级传入的prop='name', name: rules.name
          [this.prop]: this.form.rules[this.prop]  //es6的计算属性

          // const des = {};  //es写法
          // des[this.prop] = this.form.rules[this.prop]
        };
        //descriptor产生的对象{name: [{required: true,...}]}

        const validator = new schema(descriptor); //校验器，异步校验
        // 使用es6计算属性动态设置key,      ----动态获取的值--------
        validator.validate({ [this.prop]: this.form.model[this.prop] }, errors => {
          if (errors) {
            // 校验失败
            this.validateStatus = "error";
            this.errorMessage = errors[0].message;

            resolve(false);//校验失败
          } else {
            this.validateStatus = "";
            this.errorMessage = "";

            resolve(true);
          }
        });
      });
    }
  }
};
</script>

<style scoped>
.error {
  color: #f00;
}
</style>